<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>采购订单</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../elementUI/index.css">
  <link rel="stylesheet" href="../../../css/index.css">
</head>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>

<body>
  <div id="app" class="minWidth">
    <el-form :inline="true" :form="form">
      <el-form-item>
        <el-button type="primary" @click="addEnterprise">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-input @change="ChangeInput" v-model="form.Article_Name" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSerach">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">导入</el-button>
      </el-form-item>
      <el-form-item label="待付金额:">
        <span style="font-size: 2rem;font-weight: bold;">￥{{Pricethousands(statistics.Purchase_Amount)}}</span>
      </el-form-item>
      <el-form-item label="已付金额:">
        <span style="font-size: 2rem;font-weight: bold;">￥{{Pricethousands(statistics.Paid_Amount)}}</span>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" @expand-change="ChangePurchase" stripe border height="calc(100vh - 140px)"
     style="width: 100%">
      <el-table-column align="center" label="序号" width="50" type="index"></el-table-column>
      <el-table-column align="center" prop="Purchase_Order_SerialNumber" label="采购编号" width="180"></el-table-column>
      <el-table-column align="center" prop="Supplier_Name" label="供应商名">
        <template v-slot="{row}">
          <div :title="row.Supplier_Name"
            style="width: 100%; overflow: hidden;white-space: nowrap; text-overflow: ellipsis;">
            <span>{{row.Supplier_Name}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="Purchase_Date" label="采购日期" width="180"></el-table-column>
      <el-table-column align="center" prop="Quantity" label="购买数量"></el-table-column>
      <el-table-column align="center" prop="Receipt_Quantity" label="验收数量"></el-table-column>
      <el-table-column align="center" label="采购订单金额">
        <template v-slot="{row}">
          <span>{{Pricethousands(row.Purchase_Amount)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="已付金额">
        <template v-slot="{row}">
          <span>{{Pricethousands(row.Paid_Amount)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="未付金额">
        <template v-slot="{row}">
          <span :style="`color: ${Number(row.Purchase_Amount)-Number(row.Paid_Amount)==0?'#42b983':'#DC143C'};`">{{ Number(row.Purchase_Amount) -Number(row.Paid_Amount) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="Confirm_Amount" label="对方确认金额"></el-table-column>
      <el-table-column align="center" prop="Logistics_Numbers" label="物流单号"></el-table-column>
      <el-table-column align="center" prop="Logistics_Date" label="发货时间"></el-table-column>
      <el-table-column align="center" width="120" label="状态">
        <template v-slot="{row}">
          <el-tag v-if="row.Row_Status=='0'||row.Row_Status=='4'&&row.Trading_Detail_SerialNumber.includes('T01000000000002_0')||
            row.Row_Status=='5'&&row.Trading_Detail_SerialNumber.includes('T01000000000003_0')||
            row.Row_Status=='6'&&row.Trading_Detail_SerialNumber.includes('T01000000000004_0')">待付款</el-tag>
          <el-tag v-if="row.Row_Status=='1'||row.Row_Status=='4'&&row.Trading_Detail_SerialNumber.includes('T01000000000002_1')||
            row.Row_Status=='5'&&row.Trading_Detail_SerialNumber.includes('T01000000000003_1')||
            row.Row_Status=='6'&&row.Trading_Detail_SerialNumber.includes('T01000000000004_1')" type="success">待对方确认</el-tag>
          <el-tag v-if="row.Row_Status=='2'" type="info">已过期</el-tag>
          <el-tag v-if="row.Row_Status=='3'" type="info">待发货</el-tag>
          <el-tag v-if="row.Row_Status=='4'" type="warning">已发货</el-tag>
          <el-tag v-if="row.Row_Status=='5'" type="danger">待验收</el-tag>
          <el-tag v-if="row.Row_Status=='6'" type="danger">待入库</el-tag>
          <el-tag v-if="row.Row_Status=='7'" type="danger">已入库</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220">
        <template v-slot="{row}">

          <div v-if="row.Row_Status=='0'&&row.Trading_Detail_SerialNumber.includes('T01000000000001_0')||
            row.Row_Status=='4'&&row.Trading_Detail_SerialNumber.includes('T01000000000002_0')||
            row.Row_Status=='5'&&row.Trading_Detail_SerialNumber.includes('T01000000000003_0')||
            row.Row_Status=='6'&&row.Trading_Detail_SerialNumber.includes('T01000000000004_0')">
            <el-button :loading="loading" @click="Payfor(row,1)" type="success" size="small">付款</el-button>
            <el-button :loading="loading" type="success" size="small">付款详情</el-button>
          </div>
          <div v-else>
            <el-button v-if="row.Row_Status=='4'&&!row.Trading_Detail_SerialNumber.includes('T01000000000002')||
              row.Row_Status=='4'&&row.Trading_Detail_SerialNumber.includes('T01000000000002_2')" :loading="loading"
              @click="GetInquiry(row.Purchase_Order_SerialNumber,5)" type="success" size="small">收货</el-button>
            <el-button v-if="row.Row_Status=='5'&&!row.Trading_Detail_SerialNumber.includes('T01000000000003')||
              row.Row_Status=='5'&&row.Trading_Detail_SerialNumber.includes('T01000000000003_2')"
              @click="Acceptance(row,6)" :loading="loading" type="warning" size="small">验收</el-button>
            <el-button v-if="row.Row_Status=='6'&&!row.Trading_Detail_SerialNumber.includes('T01000000000004')||
              row.Row_Status=='6'&&row.Trading_Detail_SerialNumber.includes('T01000000000004_2')"
              @click="Warehousing(row,7)" type="success" size="small">入库</el-button>
            <el-button :loading="loading" type="success" size="small">付款详情</el-button>
          </div>


        </template>
      </el-table-column>
    </el-table>
    <el-pagination background v-show="total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="form.page" :page-sizes="[10,50,100,500,1000]" :page-size="form.limit"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 选择付款项 -->
    <el-dialog title="请选择付款阶段进行付款" :visible.sync="dialogPayWayVisible" width="70%">
      <div style="display: flex;flex-direction: column;padding: 20px;">
        <div v-for="(item,i) in Payment" :key="i" style="display: flex;justify-content: space-between;margin: 20px 0;">
          <span style="font-weight: bold;font-size: 1rem;">付款{{i+1}}阶段</span>
          <div>
            <span>付款金额:{{Pricethousands(item.Purchase_Amount)}}</span>
            <span>最晚付款时间:{{item.Trading_Explain}}后{{item.Trading_Days}}天</span>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button v-if="item.Row_Status=='0'" type="primary" size="small" :loading="loading"
              @click="PayWays(item)">去付款</el-button>
            <el-button v-else type="danger" size="small">已完成付款</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 选择支付方式 -->
    <el-dialog title="请选择支付方式" :visible.sync="dialogPayforVisible" width="50%">
      <div style="display: flex;flex-direction: column;padding: 20px;">
        <div style="display: flex;width: 100%;justify-content: space-around;">
          <div v-for="(item,i) in PayWay" :key="i" style="display: flex;flex-direction: column;align-items: center;">
            <el-radio :disabled="item.disabled" v-model="radio" :label="item.value">{{item.label}}</el-radio>
            <el-image @click="SelectRadio(item.value)" style="width: 100px; height: 100px" :src="item.url" fit="fill" />
          </div>
        </div>
        <div style="display: flex;justify-content: space-between;">
          <div></div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogPayforVisible = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="Pay()">确 定</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 微信支付方式 -->
    <el-dialog :title="PayTitle" :visible.sync="dialogwxPayforVisible" width="30%">
      <div style="display: flex;flex-direction: column;align-items: center;">
        <div id="WeChatPay"></div>
        <div style="display: flex;">
          <el-button type="primary" @click="Back()">返回选择页</el-button>
          <el-button type="success" @click="sure()">确认</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 支付宝支付方式 -->
    <el-dialog :title="PayTitle" :visible.sync="dialogzfbPayforVisible" width="30%">
      <div style="display: flex;flex-direction: column;align-items: center;">
        <div id="AlipayPay"></div>
        <div style="display: flex;">
          <el-button type="primary" @click="Back()">返回选择页</el-button>
          <el-button type="success" @click="sure()">确认</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 电子汇账支付方式 -->
    <el-dialog :title="PayTitle" :visible.sync="dialogdzPayforVisible" width="30%">
      <div style="display: flex;flex-direction: column;align-items: center;">
        <div style="display: flex;flex-direction: column;align-items: center;">
          <div class="preview" v-if="imageUrl!=''">
            <el-image class="el-upload-list__item-thumbnail" style="width: 148px; height: 148px" :src="imageUrl"
              fit="contain"></el-image>
            <span class="el-upload-list__item-actions">
              <span @click="handleRemove()"><i class="el-icon-delete"> </i></span>
            </span>
          </div>
          <el-upload v-else class="upload-demo" :show-file-list="false" list-type="picture-card" action=""
            accept="image/*" :before-upload="uploadBanner">
            <i slot="default" class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">上传正方形图片，且大小不超过100kb</div>
          </el-upload>
        </div>
        <div style="display: flex;">
          <el-button type="primary" @click="Back()">返回选择页</el-button>
          <el-button :loading="loading" :disabled="disabled" type="success" @click="UploadImg()">确认</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 验收单 -->
    <el-dialog title="验收订单" :visible.sync="dialogFormVisible">
      <el-form :model="item" v-for="(item,i) in formAcceptance" :key="i">
        <el-form-item label="应到数量">
          <span>{{item.Quantity}}</span>
        </el-form-item>
        <el-form-item label="实到数量">
          <el-input-number v-model="item.Receipt_Quantity" :min="item.Quantity" :max="item.Quantity"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="ModifyGoods()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 入库单 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormwareVisible">
      <el-form :model="formware">
        <el-form-item label="存货地点">
          <el-select v-model="formware.Receipt_Type" placeholder="请选择存货地点">
            <el-option v-for="item in options" :disabled="item.disabled" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库">
          <el-select v-model="formware.Store_SerialNumber" placeholder="请选择仓库">
            <el-option v-for="item in Wares" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="formware.Children.purchase_receipt_detail" style="width: 100%">
        <el-table-column prop="Article_SerialNumber" label="商品流水号">
        </el-table-column>
        <el-table-column prop="Receipt_Quantity" label="入库数量">
        </el-table-column>
        <el-table-column label="商品单价">
          <template v-slot="{row}">
            <span>{{Pricethousands(row.Amount)}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormwareVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="Sumbit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- xlsx -->
    <!-- <el-dialog title="导入采购订单" :visible.sync="dialogVisible">
      <el-upload id="Excel" class="upload-demo" :show-file-list="false" action="" :before-remove="beforeRemove"
        :file-list="fileList" :before-upload="uploadDetails">
        <el-button size="small" type="primary" v-show="fileList.length<1">导入</el-button>
        <div slot="tip" class="el-upload__tip" v-show="fileList.length<1">请上传xlsx表格</div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" @click="addEnterprise">提交</el-button>
      </div>
    </el-dialog> -->
  </div>
  <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../js/jquery.qrcode.min.js"></script>
  <script type="text/javascript" src="../../../js/vue.min.js"></script>
  <script type="text/javascript" src="../../../elementUI/index.js"></script>
  <script type="text/javascript" src="../../../js/utils.js"></script>
  <script type="text/javascript" src="../../../js/compressor.js"></script>
  <script type="text/javascript" src="../../../js/FileSaver.min.js"></script>
  <script type="text/javascript" src="../../../js/FileSaver.js"></script>
  <script type="text/javascript" src="../../../js/xlsx.full.min.js"></script>
  <script type="text/javascript" src="./js/PurchaseOrder.js"></script>
</body>

</html>